// 获取本地信息
let formName = localStorage.getItem('formName')
let categoryId = localStorage.getItem('categoryId')-0
let subCategoryId = localStorage.getItem('subCategoryId')-0
let subCategoryName = localStorage.getItem('subCategoryName')
let goodsName = localStorage.getItem('goodsName')
let goodsId = localStorage.getItem('goodsId')

// 做头顶目录
let str =  `<a href="./index.html">首页</a>
            <span>&gt;</span>
            <a href="./list.html">${formName}</a>
            <span>&gt;</span>
            <a href="./list.html">${subCategoryName}</a>
            <span>&gt;</span>
            <span>${goodsName}</span>`
$('.catalog .center').html(str)

// 发送Ajax请求 - 获取商品列表
$.ajax({
    url:'/item',
    data:{
        __timestamp: + new Date(),
        sortType: 0,
        descSorted: false,
        subCategoryId:subCategoryId,
        deliveryAreaId: 0,
        categoryId: categoryId
    },
    success: function (res){
        let itemList = res.data.itemList
        console.log(itemList)

        // ------------------将数据渲染到页面上 - 先遍历判断，寻找这条商品的数据-------------
        let str = ''
        itemList.forEach(item => {
            if(item.id != goodsId) return false
                // 进行渲染
            str = `
            <div class="imgBoxes">
                <div class="middleBox">
                    <img src="${item.listPicUrl}" alt="">
                    <div class="bigBox">
                        <img src="${item.listPicUrl}" alt="">
                    </div>
                    <div class="mask"></div>
                </div>
                <div class="littleBox">
                    <img src="${item.listPicUrl}" alt="" class="show">
                    <img src="${item.primaryPicUrl}" alt="">
                    <img src="${item.scenePicUrl}" alt="">
                </div>
            </div>
            <!-- 信息部分 -->
            <div class="infoBoxes">
                <div class="goodsTitle clearfix">
                    <h1>${item.name}</h1>
                    <h2>${item.simpleDesc}</h2>
                    <div>
                        <P>10086%</P>
                        <P>好评率&gt;</P>
                    </div>
                </div>
                <div class="detail">
                <div>
                    <div>价格</div>
                    <div id="price"><span>￥</span>${item.retailPrice}</div>
                </div>
                <div>
                    <div>促销</div>
                    <div><a href="https://you.163.com/cart/itemPool">满3999元领取赠品 (不可与优惠券叠加使用)</a></div>
                </div>
                <div>
                    <div>购物返</div>
                    <div>最高返<span>10积分</span><i class="question point"></i></div>
                </div>
                <div>
                    <div>限制</div>
                    <div>特价商品不可与优惠券叠加使用</div>
                </div>
                <div>
                    <div>邮费</div>
                    <div class="point">满99元免邮，邮费8元</div>
                </div>
                <div>
                    <div>配送</div>
                    <div>至 <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%9C%B0%E5%9B%BE/2693620">中国</a></div>
                </div>
                <div>
                    <div>服务</div>
                    <div class="point">
                        ･ 严选自营    ･ 30天无忧退换    ･ 部分规格不可用券    ･ 国内部分地区不可配送    
                        </div>
                </div>
            </div>
            <button class="save"><i class="icon-normal"></i>立即收藏</button>
            <button class="app"><i></i>下载严选APP</button>
            <button class="buye">立即购买</button>
            <button class="add"><i></i>加入购物车</button>
            </div>
            `
        });
        $('.goods .center').html(str)

        // ------------------------------ 放大镜效果-----------------------------
        // 1.光标移动上去 - 出现遮罩和大图 - 实线放大镜效果
        $('.middleBox').hover(function(){
            $('.mask').css('display','block')
            $('.bigBox').css('display','block')
            // 获取光标位置 - 实线放大镜效果
            $('.middleBox').mousemove(function(e){
                // 获取鼠标位置
                let x = e.pageX
                let y = e.pageY
                // 计算遮罩位置 - 限制遮罩位置
                var l = x - $('.mask').width()/2
                var t = y - $('.mask').height()/2
                if(l < $('.middleBox').offset().left){
                    l = $('.middleBox').offset().left
                }
                if(t < $('.middleBox').offset().top){
                    t = $('.middleBox').offset().top
                }
                if(l > $('.middleBox').offset().left + $('.middleBox').outerWidth() - $('.mask').width()){
                    l = $('.middleBox').offset().left + $('.middleBox').outerWidth() - $('.mask').width()
                }
                if(t > $('.middleBox').offset().top + $('.middleBox').outerHeight() - $('.mask').height()){
                    t  = $('.middleBox').offset().top + $('.middleBox').outerHeight() - $('.mask').height()
                }
                // 设置遮罩位置
                $('.mask').offset({
                    top:t,
                    left:l,
                })

                // 设置大图片的移动 - 规定大图片的大小
                let $width = $('.middleBox').width()/$('.mask').width()*$('.bigBox').width()
                let $height = $('.middleBox').height()/$('.mask').height()*$('.bigBox').height()
                $('.bigBox img').css({
                    width: $width,
                    height: $height,
                })
                // 计算大图片的位置
                let bigLeft = $('.mask').position().left/$('.middleBox').width()*$width
                let bigTop = $('.mask').position().top/$('.middleBox').height()*$height
                // 设置大图片位置
                $('.bigBox img').css({
                    top: -bigTop+'px',
                    left: -bigLeft+'px',
                })



            })
        },function(){
            $('.mask').css('display','none')
            $('.bigBox').css('display','none')
        })
        // 2.小图选择器
        $('.littleBox img').mouseover(function(){
            $(this).css('border','2px solid #b4a078').siblings().css('border','none')
            let src = $(this).prop('src')
            $('.middleBox img').prop('src',src)
            $('.bigBox img').prop('src',src)
        })

        // ----------------------- 猜你喜欢的轮播图 - 渲染轮播图--------------------------
        str = `
            <ul class="clearfix">
                <li>
                    <ol class="clearfix olList">
        `
        for(let i = 0;i < 4;i++){
            str += `
            <li>
                <div class="liImg scaleImg">
                    <img src="${itemList[i].primaryPicUrl}" alt="">
                </div>
                <h1>${itemList[i].name}</h1>
                <p>￥${itemList[i].retailPrice}</p>
            </li>
            `
        }
        str +=`
            </ol>
        </li>
        <li>
            <ol class="clearfix olList">`
        for(let i = 4;i < 8;i++){
            str += `
            <li>
                <div class="liImg scaleImg">
                    <img src="${itemList[i].primaryPicUrl}" alt="">
                </div>
                <h1>${itemList[i].name}</h1>
                <p>￥${itemList[i].retailPrice}</p>
            </li>
            `
        }
        str +=`
            </ol>
        </li>
        <li>
            <ol class="clearfix olList">`
        for(let i = 8;i < 12;i++){
            str += `
            <li>
                <div class="liImg scaleImg">
                    <img src="${itemList[i].primaryPicUrl}" alt="">
                </div>
                <h1>${itemList[i].name}</h1>
                <p>￥${itemList[i].retailPrice}</p>
            </li>
            `
        }
        str +=`
            </ol>
            </li>
        </ul>
        `
        $('.innerBox').html(str)
        // 轮播图js部分 - 先把头尾复制出来
        let $li = $('.innerBox ul>li').first().clone()//复制第一个 - 放队尾
        $('.innerBox ul').prepend($('.innerBox ul>li').last().clone())//复制最后一个 - 放队头
        $('.innerBox ul').append($li)
        // 设置现在的位置
        $('.innerBox ul').css('left',-$li.width()+'px')
        let index = 1
        let flag = true
        // 右箭头点击效果
        $('.rightBtn').click(function(){
            if(!flag) return false
            flag = false
            index++
            $('.innerBox ul').animate({
                left: -index*$li.width()
            },1000,function(){
                if(index === $('.innerBox ul>li').length - 1){
                    index = 1
                    $('.innerBox ul').css('left',-index*$li.width()+'px')
                }
                // 设置小点的样式
                $('.pointer li').eq(index - 1).addClass('look').siblings().removeClass('look')
            })
            flag = true
        })
        // 左箭头点击效果
        $('.leftBtn').click(function(){
            if(!flag) return false
            flag = false
            index--
            $('.innerBox ul').animate({
                left: -index*$li.width()
            },1000,function(){
                if(index === 0 ){
                    index = $('.innerBox ul>li').length - 2
                    $('.innerBox ul').css('left',-index*$li.width()+'px')
                }
                // 设置小点的样式
                $('.pointer li').eq(index - 1).addClass('look').siblings().removeClass('look')
            })
            flag = true
        })
        // 小点轮播
        $('.pointer li').mouseover(function(){
            if(!flag) return false
            flag = false
            index = $(this).index()
            $('.innerBox ul').animate({
                left: -(index+1)*$li.width()
            },1000,function(){
                // 设置小点的样式
                $('.pointer li').eq(index).addClass('look').siblings().removeClass('look')
            })
            flag = true
        })

        // 点击加入购物车事件
        $('.add').click(function(){
            // 1.获取用户信息 - 如果没登录，回去登陆
            let userId = localStorage.getItem('id')
            if(!id){
                localStorage.setItem('url','./goods.html')
                location.href = './login.html'
            }
            // 2.获取商品数据
            let data = localStorage.getItem('data')
            if(!data){
                // 本地没有数据 - 创建数据
                let arr = [{
                    id: goodsId,
                    name: goodsName,
                    userId: userId,
                    number: 1,
                }]
                // 存储数据
                localStorage.setItem('data',JSON.stringify(arr))
            }else{
                // 本地有数据 - 判断是否已有该商品
                // 先读取数据
                data = JSON.parse(data)
                let obj = data.find(item=>item.id === goodsId)
                if(!obj){
                    // 存新的一组数据
                    data.push({
                        id: goodsId,
                        name: goodsName,
                        userId: userId,
                        number: 1,
                    })
                    localStorage.setItem('data',JSON.stringify(data))
                    
                }else{
                    // 数量加一
                    // console.log(obj)
                    obj.number++
                    localStorage.setItem('data',JSON.stringify(data))
                }
            }
            // 加入成功 - 发出提示
            layer.msg('加入购物车成功',{
                icon:1,
                time:1500
            })
        })



    },
    error: function(){
        console.log('error')
    }
})